<template>
  <div class="top"><input type="checkbox" v-model="isAllChecked" />全选</div>
</template>

<script>
export default {
  name: "CartHeader",
  props: ["list"],
  computed: {
    //怎么判断？ 已选的数量==数组的长度 全选✅
    //已选的数量，数组的长度
    //list的长度
    total() {
      return this.list.length;
    },
    //已选择的商品的数量
    selectTotal() {
      //完善一点的写法
      // return this.list.reduce((item, prev) => (item += prev.select ? 1 : 0), 0);
      //true==>1  false===>0
      return this.list.reduce((item, prev) => (item += prev.select), 0);
    },
    //是否全选
    isAllChecked: {
      get() {
        //一定是return 一个布尔值
        return this.total === this.selectTotal;
      },
      set(value) {
        this.$emit("changeAll", value);
      },
    },
  },
};
</script>

<style>
.top {
  height: 40px;
  display: flex;
  align-items: center;
  background-color: pink;
}

.top > input {
  width: 20px;
  height: 20px;
  margin: 0 20px;
}
</style>
